<template>
    <div class="attendance">
        <div class="now-date">
            <common-title>
                今日考勤概览
            </common-title>
            <div class="search">
                <div class="searc-item">
                    <span class="label">选择项目：</span>
                    <Select v-model="model1" style="width:200px">
                        <Option v-for="item in projectList" :value="item.value" :key="item">{{ item.label }}</Option>
                    </Select>
                </div>
                <div class="searc-item">
                    <span class="label">选择班组：</span>
                    <Select v-model="model1" style="width:200px">
                        <Option v-for="item in banzhuList" :value="item.value" :key="item">{{ item.label }}</Option>
                    </Select>
                </div>
            </div>
            <div class="warn">
                该分包共计999人,  以下数据10分钟更新一次
            </div>
            <div class="charts-box">
                <ve-histogram :data="chartData" :legend-visible="false"></ve-histogram>
            </div>
        </div>
        <div class="now-date">
            <common-title>
                考勤打卡统计
            </common-title>
            <div class="search">
                <div class="searc-item">
                    <span class="label">选择项目：</span>
                    <Select v-model="model1" style="width:200px">
                        <Option v-for="item in projectList" :value="item.value" :key="item">{{ item.label }}</Option>
                    </Select>
                </div>
                <div class="searc-item">
                    <span class="label">选择班组：</span>
                    <Select v-model="model1" style="width:200px">
                        <Option v-for="item in banzhuList" :value="item.value" :key="item">{{ item.label }}</Option>
                    </Select>
                </div>
                <div class="searc-item">
                    <span class="label">起止时间：</span>
                     <Date-picker type="datetimerange" confirm placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>
                </div>
            </div>
            <div class="choice-box">
                <Radio-group v-model="choiceType">
                    <Radio label="按日统计"></Radio>
                    <Radio label="按月统计"></Radio>
                </Radio-group>
                <div class="warn">该分包共计999人,  以下数据10分钟更新一次</div>
            </div>
            <i-button type="primary" style="margin-bottom: 10px;">导出考勤</i-button>
            <table-box
            :tableObj="tableObj"
            @changePage="changePage"
            >
            </table-box>
        </div>
    </div>
</template>
<script>
import {VeHistogram} from 'v-charts'
export default {
    name: 'statisticAttendance',
    components: {
        VeHistogram
    },
    data () {
        return {
            model1: '',
            projectList: [],
            banzhuList: [],
             chartData: {
                columns: ['日期', '数量'],
                rows: [
                    { '日期': '迟到', '访问用户': 1393, '数量': 1093, '下单率': 0.32 },
                    { '日期': '缺卡', '访问用户': 3530, '数量': 3230, '下单率': 0.26 },
                    { '日期': '早退', '访问用户': 2923, '数量': 2623, '下单率': 0.76 },
                    { '日期': '正常打卡', '访问用户': 1723, '数量': 1423, '下单率': 0.49 },
                ]
            },
            choiceType: '',
            tableObj: {
                pageObj: {
                    pageSize: 10,
                    total: 11,
                    page: 1
                },
                list: [{content: '你好', status: 0}],
                columns: [
                    {
                        key: 'attendanceRecordID',
                        title: '姓名'
                    },
                    {
                        key: 'orderNo',
                        title: '手机号'
                    },
                    {
                        key: 'prjNo',
                        title: '身份证号'
                    },
                    {
                        key: 'prjName',
                        title: '上班次数'
                    },
                    {
                        key: 'teamNo',
                        title: '下班次数'
                    },
                    {
                        key: 'address',
                        title: '出勤天数'
                    },
                    {
                        key: 'updatedAt',
                        title: '累积工时'
                    },
                    {
                        key: 'updatedAt',
                        title: '工时'
                    }
                ]
            },
        }
    },
    methods: {
        changePage () {}
    }
}
</script>
<style lang="less" scoped>
.attendance {
    .now-date {
        background: #fff;
        margin-bottom: 10px;
        padding: 0 20px;
        .search {
            display:flex;
            padding: 20px 0;
            .searc-item {
                display:flex;
                align-items: center;
                margin-right: 32px;
                .label {
                    display:inline-block;
                    width: 70px;
                    font-size: 14px;
                    color: #333;
                }
            }
        }
        .warn {
            color: #999999;
            font-size: 12px;
        }
        .choice-box {
            display:flex;
            justify-content: space-between;
            padding: 12px 0 25px;
            align-items: center;
        }
    }
}
</style>